import React, { Component } from "react";
import Taro from '@tarojs/taro';
import { View,Image,Text, Swiper, SwiperItem} from '@tarojs/components';
import { AtButton,AtAvatar} from 'taro-ui'
import Tab from '../../components/tabBar/Tab';
import './index.scss'

class Index extends Component {
  constructor(props){
    super(props),
    this.state={
      list:[],
      listdetail:[]
    }
  }
  onReady () {
    console.log('onReady')
  }
  componentDidMount() {
    this.getList();
    this.getListDetail();
  }
  getList(){
    Taro.request({
      method:"POST",
      url: 'http://123.57.67.148:3000/mock/573/lunbo',
      data: {
        list: 'list',
        bar: 10
      },
      header: {
        'content-type': 'application/json'
      }
    })
      .then(res =>{
        this.setState({
          list:res.data.banner
        })
        console.log(res.data)
      })
  }
  getListDetail(){
    Taro.request({
      method:"POST",
      url: 'http://123.57.67.148:3000/mock/573/newproduct',
      data: {
        list: 'list',
        bar: 10
      },
      header: {
        'content-type': 'application/json'
      }
    })
      .then(res =>{
        this.setState({
          listdetail:res.data.newproduct
        })
        console.log(res.data)
      })
  }
  gotomiaosha(){
    Taro.navigateTo({
      url: '../../pages/indexmiaosha/indexmiaosha'
    })
  }
  gotochoujiang(){
    Taro.navigateTo({
      url: '../../pages/indexchoujiang/indexchoujiang'
    })
  }
  render () {
    return <View className='container'>
      <View className='top'>
      <Swiper
        className='swipers'
        indicatorColor='rgba(0,0,0,.3)'
        indicatorActiveColor='#ffffff'
        indicatorDots
        circular
        autoplay>
        {this.state.list.map((item, index) => {
          console.log(item)
              return (
                <SwiperItem key={index} className='swiper_item'>
                  <View>
                    <Image mode='aspectFill' className='big_image' src={item.imgurl}/>
                  </View> 
                </SwiperItem>
              )
            })}
      </Swiper>
      </View>
      <View className='at-row at-row--wrap middle'>
  <View className='at-col at-col-3 middleicont'>
  <Image className='icon_image' style='width:53px;height:53px' src={require('../../util/Image/qiandao.png')}/>
  <View>
   <Text className='iontTe'>签到有礼</Text> 
  </View>
  </View>
  <View className='at-col at-col-3 middleicont'>
  <Image className='icon_image' style='width:53px;height:53px' src={require('../../util/Image/fruit.png')}/>
  <View>
   <Text className='iontTe'>水果生鲜</Text> 
  </View>
  </View>
  <View className='at-col at-col-3 middleicont' onClick={this.gotomiaosha}>
  <Image className='icon_image' style='width:53px;height:53px' src={require('../../util/Image/miaosha.png')}/>
  <View>
   <Text className='iontTe'>限时秒杀</Text> 
  </View>
  </View>
  <View className='at-col at-col-3 middleicont'>
  <Image className='icon_image' style='width:53px;height:53px' src={require('../../util/Image/youliang.png')}/>
  <View>
   <Text className='iontTe'>食品粮油</Text> 
  </View>
  </View>
  <View className='at-col at-col-3 middleicont'>
  <Image className='icon_image' style='width:53px;height:53px' src={require('../../util/Image/temai.png')}/>
  <View>
   <Text className='iontTe'>特卖促销</Text> 
  </View>
  </View>
  <View className='at-col at-col-3 middleicont' onClick={this.gotochoujiang}>
  <Image className='icon_image' style='width:53px;height:53px' src={require('../../util/Image/lucky.png')}/>
  <View>
   <Text className='iontTe'>幸运抽奖</Text> 
  </View>
  </View>
</View>
<View className='at-row at-row--wrap middledetail'>
{this.state.listdetail.map((item, index) => {
          console.log(item)
              return (
                  <View className='at-col at-col-20 middet at-row__justify--center' style='font-size:18px' key={index}>
                    <View className='middetimg'>
                      <Image className='middetimgs' style='width:375px;height:200px' src={item.imgurl}/>
                      <View className='middettext' style='font-size:20px'>
                        <Text>
                          已团400件
                        </Text>
                      </View>
                    </View>
                    <View className='iontDe'>
                      <Text >{item.name}</Text>
                    </View>
                     <View className='at-row mid'>
                         <View className='midtuan'>2-4人团</View>
                         <View className=''>
                         <Text className='iontPrice'>￥{item.price}</Text>
                         </View>
                         <View className=''>
                         <AtAvatar image='https://jdc.jd.com/img/200' circle style='height:50px;width:50px'></AtAvatar>
                         </View>
                         <View className='detbtn1'>
                         <AtButton type='primary' className='detbtn'>去开团</AtButton>
                         </View>
                     </View>
                  </View>
              )
            })}
</View>
    <Tab current={0}></Tab>
    </View>
  }
}

export default Index
